<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登记照片背景颜色替换工具</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        body {
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
        }
        
        .container {
            background-color: white;
            border-radius: 20px;
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
            width: 100%;
            max-width: 900px;
            overflow: hidden;
        }
        
        header {
            background: linear-gradient(90deg, #4b6cb7 0%, #182848 100%);
            color: white;
            padding: 25px;
            text-align: center;
        }
        
        h1 {
            font-size: 2.2rem;
            margin-bottom: 10px;
        }
        
        .subtitle {
            font-size: 1.1rem;
            opacity: 0.9;
        }
        
        .main-content {
            display: flex;
            padding: 30px;
            gap: 30px;
        }
        
        .upload-section {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 20px;
        }
        
        .preview-section {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 20px;
        }
        
        .section-title {
            font-size: 1.4rem;
            color: #2c3e50;
            margin-bottom: 10px;
            font-weight: 600;
        }
        
        .upload-area {
            border: 3px dashed #4b6cb7;
            border-radius: 15px;
            padding: 40px 20px;
            text-align: center;
            background-color: #f8f9ff;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .upload-area:hover {
            background-color: #eef2ff;
            transform: translateY(-3px);
        }
        
        .upload-icon {
            font-size: 3.5rem;
            color: #4b6cb7;
            margin-bottom: 15px;
        }
        
        .upload-text {
            color: #4b6cb7;
            font-size: 1.1rem;
            margin-bottom: 15px;
        }
        
        .upload-btn {
            background: linear-gradient(90deg, #4b6cb7 0%, #182848 100%);
            color: white;
            border: none;
            padding: 12px 25px;
            border-radius: 50px;
            font-size: 1rem;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 5px 15px rgba(75, 108, 183, 0.4);
        }
        
        .upload-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(75, 108, 183, 0.6);
        }
        
        .color-options {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 15px;
            margin-top: 10px;
        }
        
        .color-btn {
            height: 60px;
            border-radius: 10px;
            border: none;
            cursor: pointer;
            transition: all 0.3s ease;
            font-weight: 600;
            color: white;
            text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        }
        
        .color-btn:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
        }
        
        .preview-container {
            border: 2px solid #e0e0e0;
            border-radius: 15px;
            overflow: hidden;
            height: 350px;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #f8f9ff;
        }
        
        canvas {
            max-width: 100%;
            max-height: 100%;
            display: none;
        }
        
        .preview-placeholder {
            text-align: center;
            color: #7f8c8d;
        }
        
        .preview-placeholder i {
            font-size: 4rem;
            margin-bottom: 15px;
            color: #bdc3c7;
        }
        
        .download-btn {
            background: linear-gradient(90deg, #27ae60 0%, #2ecc71 100%);
            color: white;
            border: none;
            padding: 15px;
            border-radius: 50px;
            font-size: 1.1rem;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 5px 15px rgba(46, 204, 113, 0.4);
            width: 100%;
            font-weight: 600;
            margin-top: 15px;
        }
        
        .download-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(46, 204, 113, 0.6);
        }
        
        .download-btn:disabled {
            background: #bdc3c7;
            cursor: not-allowed;
            transform: none;
            box-shadow: none;
        }
        
        .instructions {
            background-color: #e3f2fd;
            border-left: 5px solid #4b6cb7;
            padding: 15px;
            border-radius: 0 8px 8px 0;
            margin-top: 20px;
        }
        
        .instructions h3 {
            color: #2c3e50;
            margin-bottom: 10px;
        }
        
        .instructions ul {
            padding-left: 20px;
        }
        
        .instructions li {
            margin-bottom: 8px;
            color: #34495e;
        }
        
        footer {
            text-align: center;
            padding: 20px;
            color: #7f8c8d;
            font-size: 0.9rem;
            background-color: #f8f9fa;
            border-top: 1px solid #eaeaea;
        }
        
        @media (max-width: 768px) {
            .main-content {
                flex-direction: column;
            }
            
            h1 {
                font-size: 1.8rem;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>登记照片背景颜色替换工具</h1>
            <p class="subtitle">上传照片，一键更换背景颜色</p>
        </header>
        
        <div class="main-content">
            <div class="upload-section">
                <h2 class="section-title">上传照片</h2>
                <div class="upload-area" id="uploadArea">
                    <div class="upload-icon">📷</div>
                    <p class="upload-text">点击或拖拽照片到此处上传</p>
                    <button class="upload-btn">选择照片</button>
                    <input type="file" id="fileInput" accept="image/*" style="display: none;">
                </div>
                
                <div class="instructions">
                    <h3>使用说明：</h3>
                    <ul>
                        <li>上传正面免冠登记照片（建议纯色背景）</li>
                        <li>系统会自动识别背景区域</li>
                        <li>点击下方颜色按钮更换背景</li>
                        <li>满意后下载保存新照片</li>
                    </ul>
                </div>
            </div>
            
            <div class="preview-section">
                <h2 class="section-title">预览效果</h2>
                <div class="preview-container">
                    <div class="preview-placeholder" id="previewPlaceholder">
                        <div>🖼️</div>
                        <p>上传照片后预览效果</p>
                    </div>
                    <canvas id="originalCanvas"></canvas>
                    <canvas id="resultCanvas"></canvas>
                </div>
                
                <h2 class="section-title">选择背景颜色</h2>
                <div class="color-options">
                    <button class="color-btn" style="background: linear-gradient(135deg, #3498db, #2c3e50);" data-color="#3498db">标准蓝</button>
                    <button class="color-btn" style="background: linear-gradient(135deg, #ffffff, #f1f2f6);" data-color="#ffffff">纯白色</button>
                    <button class="color-btn" style="background: linear-gradient(135deg, #e74c3c, #c0392b);" data-color="#e74c3c">证件红</button>
                    <button class="color-btn" style="background: linear-gradient(135deg, #2ecc71, #27ae60);" data-color="#2ecc71">浅绿色</button>
                    <button class="color-btn" style="background: linear-gradient(135deg, #9b59b6, #8e44ad);" data-color="#9b59b6">淡紫色</button>
                    <button class="color-btn" style="background: linear-gradient(135deg, #f1c40f, #f39c12);" data-color="#f1c40f">米黄色</button>
                </div>
                
                <button class="download-btn" id="downloadBtn" disabled>下载修改后的照片</button>
            </div>
        </div>
        
        <footer>
            <p>© 2023 登记照片背景颜色替换工具 | 本工具仅在前端处理照片，不会上传您的照片到服务器</p>
        </footer>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const fileInput = document.getElementById('fileInput');
            const uploadArea = document.getElementById('uploadArea');
            const originalCanvas = document.getElementById('originalCanvas');
            const resultCanvas = document.getElementById('resultCanvas');
            const previewPlaceholder = document.getElementById('previewPlaceholder');
            const downloadBtn = document.getElementById('downloadBtn');
            const colorButtons = document.querySelectorAll('.color-btn');
            
            let originalImage = null;
            let backgroundColor = '#ffffff'; // 默认白色背景
            
            // 上传区域点击事件
            uploadArea.addEventListener('click', () => fileInput.click());
            
            // 文件选择处理
            fileInput.addEventListener('change', function(e) {
                if (e.target.files && e.target.files[0]) {
                    const reader = new FileReader();
                    
                    reader.onload = function(event) {
                        const img = new Image();
                        img.onload = function() {
                            // 设置Canvas尺寸
                            const maxWidth = 400;
                            const maxHeight = 350;
                            let width = img.width;
                            let height = img.height;
                            
                            // 保持宽高比调整大小
                            if (width > maxWidth) {
                                height = (maxWidth / width) * height;
                                width = maxWidth;
                            }
                            if (height > maxHeight) {
                                width = (maxHeight / height) * width;
                                height = maxHeight;
                            }
                            
                            originalCanvas.width = width;
                            originalCanvas.height = height;
                            resultCanvas.width = width;
                            resultCanvas.height = height;
                            
                            // 绘制原始图片
                            const ctx = originalCanvas.getContext('2d');
                            ctx.clearRect(0, 0, width, height);
                            ctx.drawImage(img, 0, 0, width, height);
                            
                            // 显示Canvas，隐藏占位符
                            originalCanvas.style.display = 'block';
                            resultCanvas.style.display = 'block';
                            previewPlaceholder.style.display = 'none';
                            
                            // 保存原始图片
                            originalImage = img;
                            
                            // 启用下载按钮
                            downloadBtn.disabled = false;
                            
                            // 应用当前选择的背景色
                            applyBackgroundColor();
                        };
                        img.src = event.target.result;
                    };
                    
                    reader.readAsDataURL(e.target.files[0]);
                }
            });
            
            // 颜色按钮点击事件
            colorButtons.forEach(button => {
                button.addEventListener('click', function() {
                    backgroundColor = this.getAttribute('data-color');
                    applyBackgroundColor();
                });
            });
            
            // 应用背景颜色
            function applyBackgroundColor() {
                if (!originalImage) return;
                
                const ctxOriginal = originalCanvas.getContext('2d');
                const ctxResult = resultCanvas.getContext('2d');
                
                // 绘制原始图片到结果Canvas
                ctxResult.drawImage(originalImage, 0, 0, resultCanvas.width, resultCanvas.height);
                
                // 获取图像数据
                const imageData = ctxResult.getImageData(0, 0, resultCanvas.width, resultCanvas.height);
                const data = imageData.data;
                
                // 获取背景颜色（取左上角像素）
                const bgR = data[0];
                const bgG = data[1];
                const bgB = data[2];
                
                // 将RGB转换为目标颜色
                const targetColor = hexToRgb(backgroundColor);
                
                // 替换背景色
                for (let i = 0; i < data.length; i += 4) {
                    const r = data[i];
                    const g = data[i + 1];
                    const b = data[i + 2];
                    
                    // 简单判断是否为背景（实际应用中可用更复杂的算法）
                    if (isBackground(r, g, b, bgR, bgG, bgB)) {
                        data[i] = targetColor.r;
                        data[i + 1] = targetColor.g;
                        data[i + 2] = targetColor.b;
                    }
                }
                
                // 将修改后的图像数据放回Canvas
                ctxResult.putImageData(imageData, 0, 0);
            }
            
            // 判断是否为背景像素（简化版）
            function isBackground(r, g, b, bgR, bgG, bgB, threshold = 50) {
                // 计算颜色差异
                const diff = Math.abs(r - bgR) + Math.abs(g - bgG) + Math.abs(b - bgB);
                return diff < threshold;
            }
            
            // 十六进制颜色转RGB
            function hexToRgb(hex) {
                const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
                return result ? {
                    r: parseInt(result[1], 16),
                    g: parseInt(result[2], 16),
                    b: parseInt(result[3], 16)
                } : {r: 255, g: 255, b: 255}; // 默认白色
            }
            
            // 下载处理后的照片
            downloadBtn.addEventListener('click', function() {
                const link = document.createElement('a');
                link.download = 'modified-photo.png';
                link.href = resultCanvas.toDataURL('image/png');
                link.click();
            });
            
            // 拖放功能
            uploadArea.addEventListener('dragover', function(e) {
                e.preventDefault();
                this.style.backgroundColor = '#eef2ff';
            });
            
            uploadArea.addEventListener('dragleave', function(e) {
                e.preventDefault();
                this.style.backgroundColor = '#f8f9ff';
            });
            
            uploadArea.addEventListener('drop', function(e) {
                e.preventDefault();
                this.style.backgroundColor = '#f8f9ff';
                
                if (e.dataTransfer.files && e.dataTransfer.files[0]) {
                    fileInput.files = e.dataTransfer.files;
                    const event = new Event('change');
                    fileInput.dispatchEvent(event);
                }
            });
        });
    </script>
</body>
</html>